<template>

  <a-layout>
    <a-layout-header class="headerStyle">
        <!--标题栏-->
        <div class="titleBar">
          <strong style="font-size: large">区块链电镜数据分布式存证与共享平台</strong>
        </div>

      <div>
        <a-button type="primary" danger @click="logout">注销</a-button>
<!--        <a-button type="primary" @click="downloadExperimentSet">下载测试</a-button>-->

        <a-tooltip>
          <template #title>进行区块链操作将收取一定的手续费，请谨慎操作！</template>
          <strong style="margin-left: 10px">账户余额：{{accountBalance===-1 ? '-':accountBalance}}</strong> <span>&nbsp;ZXC</span>
        </a-tooltip>


      </div>

      <a-modal v-model:visible="isLogoutModalVisible"
               title="注销确认"
               ok-text="确认"
               cancel-text="取消"
               @ok="confirmLogout"
               @cancel="cancelLogout">
        <p>
          注销登陆后会话缓存记录将被清除，是否确认注销登录？
        </p>
      </a-modal>

    </a-layout-header>
    <a-layout>
      <a-layout-sider class="siderStyle">
          <!--侧边栏-->
          <div>
            <a-menu
                mode="inline"
                theme="dark"
                :inline-collapsed="collapsed"
                :items="MenuItems"
                class="NavigationBar"
                @click="handleNavigationBarClick"
                v-model:selected-keys="selectedItem"
            ></a-menu>
          </div>
      </a-layout-sider>
      <a-layout-content class="contentStyle">
          <!--上方步骤条-->
<!--          <div style="padding: 10px 0 10px 15px"-->
<!--               v-if="isStepBarDisplay">-->
<!--            <a-steps-->
<!--            v-model:current="currentStep"-->
<!--            :items="steps"-->
<!--            style="padding: 0 5vw 0 5vw"-->
<!--            type="navigation"></a-steps>-->
<!--            <hr/>-->
<!--          </div>-->

          <!--主体页面，渲染到此处-->
            <router-view/>
      </a-layout-content>
    </a-layout>
  </a-layout>


</template>

<script>
import {h} from 'vue';
import {
  PieChartOutlined,
  MailOutlined,
  DesktopOutlined,
  InboxOutlined,
  AppstoreOutlined,
} from '@ant-design/icons-vue';
import {message, Modal} from 'ant-design-vue';
import axiosInstance from './axios/axios.js';

export default {
  name:'App',
  data(){
    return{
      isLogoutModalVisible:false, //标识注销二次确认框是否可见
      //定时器
      //刷新步骤条currentStep
      timer:setInterval(()=>{
        // const newCurrentStep=sessionStorage.getItem("currentStep");
        // this.currentStep=newCurrentStep;
        this.initAccountBalance();
      },30000),

      //数据信息录入步骤条信息
      currentStep:"0",  //从第0步开始
      steps:[{
        title:"实验条件"
      },{
        title:"实验批次"
      },{
        title:"数据上传"
      }],
      //v-if标识步骤条是否显示(通过watch侦听路由实现)
      isStepBarDisplay:false,

      //左侧导航菜单属性
      collapsed:false,
      selectedItem:[],
      MenuItems:[
        {
          key:'1',
          label:'区块链平台概况',
          title:'区块链平台概况'
        },
        {
          key:'3',
          label:'我的数据',
          title:'我的数据'
        },
        {
          key:'4',
          label:'链上数据',
          title:'链上数据'
        },
        {
          key:'5',
          label:'我的授权',
          title:'我的授权'
        },
      ],

      //账户余额
      accountBalance:-1
    }
  },
  methods:{
    downloadExperimentSet(){
      axiosInstance({
        method: "POST",
        url: "download/experimentSet",
        headers: {
          Authorization: `Bearer ${this.$cookies.get("jwt")}` // 设置请求头，携带 JWT
        },
        data: {
          username: this.$cookies.get("username"),
          experimentSetName:"1"
        },
      }).then((response) => {
        console.log("下载响应内容：")
        console.log(response.data)
        const link = document.createElement('a');
        link.href = response.data.data;
        link.setAttribute('download', ''); // 可以设置下载文件名，也可以留空
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }).catch((err) => {
        console.log(err);
      });
    },


    //点击登出
    logout(){
      this.isLogoutModalVisible=true
    },

    //确认登出
    confirmLogout(){
      this.isLogoutModalVisible=false
      sessionStorage.setItem("isLogin","false")
      this.$router.push("/");
      this.accountBalance=-1;
    },

    //取消登出
    cancelLogout(){
      this.isLogoutModalVisible=false
    },

    //导航栏点击事件
    handleNavigationBarClick(event){

      let isLogin=sessionStorage.getItem("isLogin");

      if (isLogin!=='true'){  //不要写为isLogin===false，可能为null
          message.warn("跳转失败，请先登录")
          return;
      }

      //清空store

      //重置currentStep
      this.currentStep="0";
      sessionStorage.setItem("currentStep","0");

      switch (event.key){
        case '1':
          this.$router.push("/");
          break;
        case '3':
          this.$router.push("/MyData/ExperimentSet");
          break;
        case '4':
          this.$router.push("/ChainData/ExperimentSet");
          break;
        case '5':
          this.$router.push("/Grant");
          break;
      }
    },

    //初始化账户余额
    initAccountBalance(){
      const loginJudge=sessionStorage.getItem("isLogin");
      if (loginJudge!=='true'){
        this.accountBalance=-1;
        return;
      }
      axiosInstance({
        method: "GET",
        url: "myData/myBalance?Address="+this.$cookies.get("userAddress"),
        headers: {
          Authorization: `Bearer ${this.$cookies.get("jwt")}` // 设置请求头，携带 JWT
        },
      }).then((response) => {
        this.accountBalance=response.data.data;
      }).catch((err) => {
        console.log(err);
      });
    },

  },

  mounted() {
    this.initAccountBalance();
    sessionStorage.setItem("currentStep","0")
  },

  watch:{
    //侦听路由变化
    //用于侧边栏随着路由的变化而变化
    $route(to,from){
      let targetUrl=to.fullPath;
      if (targetUrl.startsWith("/MyData")){
        this.selectedItem=['3']
      }else if (targetUrl.startsWith("/ChainData")){
        this.selectedItem=['4']
      }else if (targetUrl.startsWith("/Grant")){
        this.selectedItem=['5']
      }else if (targetUrl==='/'){
        this.selectedItem=['1']
      }else {
        this.selectedItem=[]
      }

    }
  }
}

</script>

<style scoped>

.titleBar{

}

.NavigationBar{
  width: 12vw;
  height: 91vh;
  border-radius: 10px;
  padding: 15px 0 0 0;
}

.headerStyle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  height: 9vh;
  background-color: #009dff;
}

.contentStyle{
  text-align: center;
  height: 91vh;

}

.siderStyle{
  text-align: center;
  height: 91vh;
}

</style>
